<template>
  <div id="blance-record">
    <div class="content-record">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('member.blance.record.all') " name="first"></el-tab-pane>
        <el-tab-pane :label="$t('member.blance.record.recharge') " name="0"></el-tab-pane>
        <el-tab-pane :label="$t('member.blance.record.withdrawal') " name="1"></el-tab-pane>
        <el-tab-pane :label="$t('member.blance.record.transfer') " name="2"></el-tab-pane>
        <el-tab-pane :label="$t('member.blance.record.pointsToU') " name="3"></el-tab-pane>
        <el-tab-pane :label="$t('member.blance.record.otherDetails') " name="4"></el-tab-pane>
      </el-tabs>
      <div class="content-table">
        <el-table
            :data="recordArr"
            style="width: 100%">
            <el-table-column
              style="padding-left: 25px;"
              :label="$t('member.blance.record.type') "
              width="120">
              <template slot-scope="scope">
                <span>{{scope.row.type_name}}</span>
              </template>

            </el-table-column>
            <el-table-column
              :label="$t('member.blance.record.quantity') ">
              <template slot-scope="scope">
                <span>{{scope.row.account_data || 0.0000}}</span>
              </template>
            </el-table-column>
<!--            <el-table-column-->
<!--              :label="$t('member.blance.record.handlingFee') ">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ scope.row.handlingFee || 0.0000}}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              :label="$t('member.blance.record.depositAddress') " width="220">-->
<!--              <template slot-scope="scope">-->
<!--                <span>/</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              :label="$t('member.blance.record.withdrawalAddress') " width="220">-->
<!--              <template slot-scope="scope">-->
<!--                <span>/</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column style="padding-right: 25px;" align="right" width="180" :label="$t('member.blance.record.transactionHour') ">
              <template slot-scope="scope">
                <span>{{scope.row.create_time}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="pageChange"
            :current-page.sync="pageNo"
            :page-size="10"
            :prev-text="$t('commons.previousPage') "
            :next-text="$t('commons.nextPage') "
            layout="total, prev, pager, next"
            :total="totalCount">
          </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { listFn , walletCoinLog} from '@/api/member/blance'
export default {
  data() {
    return {
      activeName: 'first',
      recordArr: [],
      totalCount: 1,
      pageNo: parseInt(this.$route.query.page) || 1,
    };
  },
  computed: {
    
  },
  created() {
    this.getList();
  },
  mounted() {

  },
  methods: {
    getList(){
        if (this.activeName == 'first'){
            listFn({
                account_type: 'balance',
                page: parseInt(this.pageNo),
                page_size: 10
            }).then(res => {
                if(res.code == 0){
                    let result = res.data;
                    this.totalCount = result.count;
                    this.recordArr = result.list;
                }
            }).catch(err => {
                this.$message.error(err.message);
            })
        }else{
            walletCoinLog({
                account_type: 'balance',
                page: parseInt(this.pageNo),
                page_size: 10,
                type: this.activeName
            }).then(res => {
                if(res.code == 0){
                    let result = res.data;
                    this.totalCount = result.count;
                    this.recordArr = result.list.map(item=>{
                        return {
                            title: item.title,
                            id: item.id,
                            type: item.type,
                            account_data: item.money,
                            handlingFee: item.deductionmoney,
                            depositAddress: item.nickname,
                            withdrawalAddress: item.nickname,
                            type_name: item.title,
                            create_time: timeStampTurnTime(item.create_time)
                        }
                    });

                    console.log(this.recordArr)
                }
            }).catch(err => {
                this.$message.error(err.message);
            })
        }

    },
    handleClick(tab, event){
      console.log(this.activeName);
      if(this.activeName == 'first'){
        if(this.pageNo != 1){
          this.replaceRouter(this.$route,{page: 1})
          this.pageNo = 1;
        }
        this.getList();
      }else {
        this.recordArr = [];
        this.totalCount = 0;
        this.pageNo = 1;
        this.getList();
      }
    },
    // 页码切换
    pageChange(val) {
      this.replaceRouter(this.$route,{page: val})
      this.getList();
    },
    replaceRouter(routerObj,obj){
      let queryMsg = JSON.parse(JSON.stringify(routerObj.query))
      this.$router.replace({
        name: routerObj.name,
        query: Object.assign(queryMsg,obj)
      })
    },
  }
};
</script>

<style lang="scss">
  #blance-record {
    .el-tabs__item {
      height: 55px;
      line-height: 55px;
    }
    .el-tabs__nav-scroll {
      padding-left: 20px;
    }
    .content-table {
      th:first-child,td:first-child {
        padding-left: 10px;
      }
      th:nth-child(6),td:nth-child(6) {
        padding-right: 10px;
      }
    }
  }
</style>

<style scoped lang="scss">
  .content-record {
    width: 100%;
    background: #fff;
  }
</style>
